<style lang="stylus" scoped>
  body,html{
        height: 100%;
        margin: 0;
        padding: 0;
    }
  /* 外层容器 */
  .orderarea-box{
    background: rgba(255,255,255,1);
    display: flex;
    flex-direction:column;
    height: 100%;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }

  /* 标题 */
  .title{
    font-size:17px;
    font-family:'SourceHanSansCN-Medium';
    font-weight:600;
    color:rgba(39,37,37,1);
    line-height:35px;
    height:35px;
  }

  /* 顶部导航盒子 */
  .top-tabbar{
    background:rgba(255,255,255,1);
    height:64px;
    padding:12px 0;
      /* 导航内部盒子 */
    .top-tabbar-box{
      margin: 0 auto;
      width: 250px;
      border:1px solid rgba(255,216,224,1);
      /* 未选中的tabbar样式 */
      div{
        height: 40px;
        line-height: 40px;
        font-size:14px;
        font-family:'SourceHanSansCN-Medium';
        font-weight:600;
        color:rgba(255,161,176,1);
      }
      /* 当前选中的tabbar样式 */
      .top-tabbar-current{
        background: rgba(255,194,204,1);
        color:rgba(255,255,255,1);
      }
    }
  }



  /* 数据列表 */
  .datalist{
    flex:1;
    background: rgba(255,216,224,1);
    padding: 15px 15px 0 15px;
    overflow: auto
  }
  /* 隐藏滚动条 */
  .datalist::-webkit-scrollbar {
    display: none;
  }
  .li{
    box-sizing: border-box;
    margin-bottom:15px;
    background:rgba(255,255,255,1);
    padding:12px;
    .li-img-box{
      width: 110px;
      .li-img{
        width: 110px;
      }
    }
    .li-content{
      padding-left: 12px;
      flex-direction:column;
      justify-content:space-between;
      /* 上面描述 */
      .li-top{
        :nth-child(1){
          font-size:14px;
          font-family:'SourceHanSansCN-Medium';
          font-weight:600;
          color:rgba(65,61,61,1);
          line-height:18px;
          /* width: 80%; */
          padding-right: 15px;
        }

      }
      /* 下面数据 */
      .li-bottom{
        :nth-child(1){
          font-size:12px;
          font-family:'SourceHanSansCN-Medium';
          font-weight:600;
          color:rgba(160,154,155,1);
          line-height:18px;
          /* padding: 5px 0 15px; */
        }
      }
    }
  }

  /* 库存tabbar */
  .joint{
    margin-top: 10px;
    font-size:14px;
    font-family:'SourceHanSansCN-Medium';
    font-weight:500;
    color:rgba(65,61,61,1);
    line-height:35px;
    /* 选中的tabbar */
    .currentTabbar{
      font-weight:600;
    }
    .currentspan{
      padding:5px;
      border-bottom:3px solid rgba(255,194,204,1);
    }

  }

  /* 价格区 */
  .spa-box{
    margin-top: 5px;
    span:nth-child(1){
      /* margin-bottom: 2px; */
      img{
        width: 26px;height:23px;padding: 0 !important;
      }
    }
    span:nth-child(2){
          font-size:24px;
          font-family:'SourceHanSansCN-Medium';
          font-weight:600;
          color:rgba(255,161,176,1);
          line-height:18px;
          padding-left: 3px;
    }
  }
  .mask-box{
    position: fixed;left: 0;right: 0;top: 0;bottom: 0;
    background: rgba(0,0,0,0.3);
    /* opacity: 0.3; */
  }
  .mask-content{
    position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%)
  }
  .mask-btn{
    height:40%;
    position: absolute;left: 0;bottom: 0;
    text-align: center;
    span{
      display: inline-block;
      width: 160px;height: 40px;
      line-height: 40px;
      text-align:center;
      border:1px solid rgba(255,161,176,1);
      margin-top: 10px;
      font-size:15px;
      font-family:'SourceHanSansCN-Regular';
      font-weight:400;
      color:rgba(255,161,176,1);
    }
    span:nth-child(1){
      background:rgba(255,161,176,1);
      color:rgba(255,255,255,1);
    }
  }
  .add-box{
      position: fixed;
      left: 0;
      /* top: 0; */
      bottom: 10%;
      right: 0;
      background: rgba(0,0,0,0.3);

    }

    .add-title{
      /* padding:10px; */
      height:44px;
    }
  .add-hot-ul{
    width: 100%;
       /* height: 150px; */
       display: flex;
       flex-flow: row wrap;
       align-content: flex-start;
  }
  .add-hot-li{
        box-sizing: border-box;
       background-color: white;
       flex: 0 0 25%;
       height: 40px;
       text-align: center;
        /* vertical-align: middle; */
        line-height: 40px;
       /* border: 1px solid red; */
  }
  /* .add-data-ul{
    overflow: auto;
    height: 400px;
  } */
  .add-data-li{
    line-height: 50px;
    padding-left:30px;
    /* border-bottom: 1px solid #eee; */
  }
  .city-window{
      width: 100%; background-color:rgba(0, 0, 0, 0.5);padding:20px 0px;position: fixed;left: 0;right: 0;top: 0;bottom: 0;display: flex;align-items: center;
      .btnul{
          background-color: rgb(255, 255, 255);padding:30px 5px;width: 100%;min-height: 200px;
          p{
            margin-bottom: 10px;
            .btn-find{
              width: 83%;margin:10px 30px;
            }
          }
          li{
            width: 33%;
            float:left;text-align: center;padding:5px 0;
          }
        }
    }
    .listul{
      margin-top: 10px;
      background #f0f0f0;
      padding-top 10px;
      li{
          padding:10px 20px;background-color: #fff;border-radius: 10px;margin: 10px;
        }
    }
</style>
<!-- 下单区，首页，显示商品页面 -->
<template>
  <div class="orderarea-box">
    <!-- 顶部标签 -->

    <!-- 顶部tabbar ，使用isshowtabbar判断是否渲染，默认为false，只有联创等级才渲染-->
    <!-- <div class="top-tabbar">
      <div class="flex-display text-c top-tabbar-box">
        <div
          class="flex-num-one"
          :class="currentTabbar=='面膜区'?'top-tabbar-current':''"
          @click="fnChangetabber('面膜区')"
        >
          面膜区
        </div>
        <div
          class="flex-num-one"
          :class="currentTabbar=='联创下单区'?'top-tabbar-current':''"
          @click="fnChangetabber('联创下单区')"
        >
          联创下单区
        </div>
      </div>
    </div> -->

    <!-- 联创区tabbar ，多重判断-->
    <!-- 点击联创下单区，才显示该导航 -->

    <!-- 最新，所有用户都显示 -->
    <!-- {{isShowtop || JSON}} -->
    <!-- {{isShowtop }} -->

    <div >
      <div class="flex-display joint">
        <div
          class="flex-num-one text-c"
          @click="fnChangeStockTabbar('公司库存')"
          v-if="isShowtop"
          :class="currentStockTabbar=='公司库存'?'currentTabbar':''"
        >
          <span :class="currentStockTabbar=='公司库存'?'currentspan':''">
              公司库存
          </span>
        </div>
        <div
          class="flex-num-one text-c"
          @click="fnChangeStockTabbar('个人库存')"
          :class="currentStockTabbar=='个人库存'?'currentTabbar':''"
        >
          <span :class="currentStockTabbar=='个人库存'?'currentspan':''">
              个人库存
          </span>
        </div>
      </div>
    </div>
    <!-- {{goodslist || json}} -->
    <!-- {{currentStockTabbar || json}} -->
    <!-- 数据列表 -->
    <div class="datalist" v-if="goodslist.length>0">
      <ul>
        <li
          v-for="(item,index) in goodslist"
          :key="index"
          class="flex-display li"
          @click="fnToDetail(item.id,index,item)"
        >
          <!-- 左侧，图片 -->
          <div class="li-img-box">
            <img :src="item.photo" class="li-img" />
          </div>

          <!-- 右侧，文字 -->
          <div class=" li-content flex-display ">
            <div class="li-top">

              <!-- 默认显示两行内容 -->
              <p class="text-overflow-2">
                {{ item.title }}<br/>
                {{ item.units_describe }}
              </p>

              <!-- 价格区，根据区域不同，选择不同的金额表达 -->
              <p class="flex-row-start spa-box">

                <!-- 人民币符号 -->
                <!-- <span
                  v-if="currentTabbar == '面膜区'"
                  class="icon-money-1"
                  style="color:rgba(255,161,176,1);font-size: 24px;padding: 0;"
                  >
                  ¥
                </span> -->

                <!-- 砖石图标 -->
                <span style="padding: 0;margin-top: 4px;;" class="icon-money-2">
                  <img src="../../../static/new/huiyuanjifen.png"/>
                </span>

                <!-- 暂时兼容价格，面膜区的价格接口未更新 -->
                <span v-if="currentTabbar =='面膜区'">
                  {{ item.new_price }}
                </span>

                <span>
                  {{ fn_handle_price(item.goods_price,item.new_price) }}
                </span>
              </p>
            </div>
            <div class="li-bottom">
              <p v-if="currentStockTabbar=='公司库存'">库存：{{ item.inventory }}</p>
              <p v-else>个人库存：{{ item.inventory }}</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- {{goodslist || JSON}}
    {{currentStockTabbar || JSON}}
    {{wxUserInfo.level}} -->
    <!-- 暂无内容，没有列表，显示暂无内容 -->
    <div v-if="!goodslist||!goodslist.length>0">
      <img
        src="../../../static/new/img_empty_order@2x.png"
        style="width: 100%;height:500px;"
      />
      <p v-if="!goodslist.length && currentStockTabbar=='个人库存' &&wxUserInfo.level != '联合创始人'" style="text-align: center;font-size:16px;color:rgba(102,102,102,1);">
        目前没有个人库存，请向推荐人进货
      </p>
      <p v-if="!goodslist.length && currentStockTabbar=='个人库存' &&wxUserInfo.level == '联合创始人'" style="text-align: center;font-size:16px;color:rgba(102,102,102,1);">
        目前没有个人库存，请到公司库存进货
      </p>
    </div>

    <!-- 验证界面，联合创始人，但没有验证的，则弹出选框 -->
    <div
      class="mask-box"
      v-if="isShowMask"
      @click.self="fnToAuthenticate('no')">
      <div class="mask-content">
        <img
          src="../../../static/new/img_popupwindow.png"
          style="width: 247px;height:312px;"
        />
        <div class="mask-btn ">
          <span @click="fnToAuthenticate('yes')">马上认证</span>
          <span @click="fnToAuthenticate('no')">稍后认证</span>
        </div>
      </div>
    </div>

    <!-- 地址弹框 -->
    <div class="add-box" v-if="isShowAdd" @click.self="isShowAdd = false">
      <div class="city-list">
        <p @click="find('sheng')">
          <mt-field
            class=""
            label="省份"
            placeholder="请选省份"
            type="text"
            rows="4"
            v-model="sheng"
            :state="sheng =='' ? '' : 'success'"
            readonly="readonly"
          ></mt-field>
        </p>
        <p @click="find('shi',shengcode,1)">
          <mt-field
            class=""
            label="城市"
            placeholder="请选城市"
            type="text"
            rows="4"
            v-model="shi"
            :state="shi =='' ? '' : 'success'"
            readonly="readonly"
          ></mt-field>
        </p>
        <p @click="find('qu',shicode)">
          <mt-field
            class=""
            label="县区"
            placeholder="请选县区"
            type="text"
            rows="4"
            v-model="qu"
            :state="qu =='' ? '' : 'success'"
            readonly="readonly"
          ></mt-field>
        </p>
        <p>
          <mt-field
            class=""
            label="详细信息"
            placeholder="请输入详细信息"
            type="text"
            rows="4"
            v-model="key"
            @input="qingkong"
            :state="key =='' ? '' : 'success'"
          ></mt-field>
        </p>
        <mt-button
          type="primary"
          size="large"
          style="width: 100%;"
          @click.stop="chazhao"
        >
          确定提交
        </mt-button>
      </div>
      <!-- 城市选项弹窗 -->
      <div v-if="show" @click="show = false;" class="city-window">
        <ul class="btnul">
          <li
            v-for="(item,idx) in arr1"
            :key="idx"
            :id="item.code"
            @click="find(now,item.id,item.name)"
          >
            {{ item.name }}
          </li>
        </ul>
        <!-- 城市加载效果 -->
      </div>
      <!-- <loading
        v-if="cityloading"
        style="position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%)"
      ></loading> -->
    </div>



    
    <!-- <div class="add" @click.self="isShowAdd2 = false" v-if="isShowAdd2">
      <div class="add-container">
          <div  class="add-title flex-row-between">
            <span></span>
            <span>请选择</span>
            <span @click.self="isShowAdd2 = false">X</span>
          </div>
          <div v-if= "add.sheng == '请选择省份'">
            <p style="line-height: 30px;">热门城市</p>
            <div>
              <ul class="flex-wrap add-hot-ul " >
                <li v-for="(item,index) in hotCity" :key = "index" class="add-hot-li">
                  {{item}}
                </li>
              </ul>
            </div>
          </div>
          <div v-if= "add.sheng != '请选择省份'">
            <div class="flex-row-start">
              <div :class="add.sheng == '请选择省份' ? 'dot-1':'dot-2'" @click="find('sheng')"></div>
              <div>
                {{add.sheng}}
              </div>
            </div>
            <div class="flex-row-start" v-if= "add.sheng != '请选择省份'"
              @click="find('shi',add.shengcode,1)">
              <div :class="add.shi == '请选择城市' ? 'dot-1':'dot-2'"></div>
              <div>
                {{add.shi}}
              </div>
            </div>
            <div class="flex-row-start" v-if= "add.shi != '请选择城市'"
              @click="find('qu',add.shicode)">
              <div :class="add.qu == '请选择县区' ? 'dot-1':'dot-2'"></div>
              <div>
                {{add.qu}}
              </div>
            </div> -->
            <!-- <div class="flex-row-start" v-if= "add.qu != '请选择县区'">
              <div :class="add.jiedao == '请选择街道' ? 'dot-1':'dot-2'"></div>
              <div>
                {{add.jiedao}}
              </div>
            </div> -->
            <!-- <div v-if="add.qu != '请选择县区'" class="flex-row-between">
              <div >
                请输入详细地址
              </div>
              <input type="text" v-model="add.detail" class="flex-num-one ML-20" placeholder="详细地址">
            </div>
            <div class="btn-green text-c" v-if="add.detail !=''">
              确定
            </div>
          </div>
          <div class="city-box">
            <p style="line-height: 40px;"> 请选择省份/地区</p>
            <ul class="add-ul">
              <li v-for="(item,index) in arr1" :key = "index" class="add-data-li"
              @click="find(now,item.id,item.name)">
                {{item.name}}
              </li>
            </ul>
          </div>
        </div>
    </div> -->









    <!-- v-if="isShowAdd2" -->
    <div class="add" @click.self=" closs" v-if="isShowAdd2">
        <div class="add-container flex-column-start " :class="iscloss == true ? 'add-container2' :''">
  
            <!-- 标题 -->
            <div  class="add-title flex-row-between">
              <span></span>
              <span class="select-text">请选择</span>
              <span @click="closs">
                <img src="../../../static/new/icon_close.png" style="width:22px;height:22px;">
              </span>
            </div>
  
            <!-- 热门 -->
            <!-- v-if= "add.sheng == '请选择省份'" -->
            <div v-if= "add.sheng == '请选择省份'"class="hot-city-box">
              <p class="hot-city">热门城市</p>
              <div>
                <ul class="flex-wrap add-hot-ul " >
                  <li v-for="(item,index) in hotCity" :key = "index" class="add-hot-li2" @click="findAddList(current,item.name,item.id)">
                    {{item.name}}
                  </li>
                </ul>
              </div>
            </div>
  
            <!-- 地址展示 -->
            <div v-if= "add.sheng != '请选择省份'" class="add-show">
              <!-- 省份 -->
              <div class="flex-row-start" @click="findAddList('sheng',1,1,1,add.sheng)">
                <div :class="add.sheng == '请选择省份' ? 'dot-1':'dot-2'" ></div>
                <div>
                  {{add.sheng}}
                </div>
              </div>
              <!-- 城市 -->
              <div class="flex-row-start" v-if= "add.sheng != '请选择省份'"
                @click="findAddList('shi',add.sheng,add.shengcode,2,add.shi)">
                <div :class="add.shi == '请选择城市' ? 'dot-1':'dot-2'"></div>
                <div>
                  {{add.shi}}
                </div>
              </div>
              <!-- 县区 -->
              <div class="flex-row-start" v-if= "add.shi != '请选择城市'"
                @click="findAddList('qu',add.shi,add.shicode,3,add.qu)">
                <div :class="add.qu == '请选择县区' ? 'dot-1':'dot-2'"></div>
                <div>
                  {{add.qu}}
                </div>
              </div>
              <!-- 街道 -->
              <div class="flex-row-start" v-if= "add.qu != '请选择县区'"
              @click="findAddList('jiedao',add.qu,add.qucode,4,add.jiedao)">
                <div :class="add.jiedao == '请选择街道' ? 'dot-1':'dot-2'"></div>
                <div>
                  {{add.jiedao}}
                </div>
              </div>

              <div v-if="add.jiedao != '请选择街道'" style="color:rgba(25,25,25,1);margin-bottom: 20px;">
                <div style="padding-left: 27px;" class="MT-5">
                  请输入详细地址
                </div>
                <div class="flex-num-one ML-20 flex-row-between MT-5 PT-10" >
                    <input type="text" v-model="add.detail" placeholder="详细地址" style="padding-left: 7px;" autofocus>
                  <img src="../../../static/new/icon_cloes.png" style="margin-right: 20px;" @click="add.detail = ''">
                </div>

              </div>
              <div 
                class="btn-queren text-c" 
                v-if="add.jiedao != '请选择街道'" 
                style="color:rgba(255,255,255,1);"
                @click="addDefine"
                >
                确定
              </div>
            </div>

            <!-- 选框 -->
            <!-- v-if="add.jiedao == '请选择街道'" -->
            <div class="city-box pos-relative flex-num-one flex-column-start" v-if="isshowaddlist">
              <p style="line-height: 40px;" v-if="current=='shi'">请选择省份/地区</p>
              <p style="line-height: 40px;" v-if="current=='qu'">请选择城市</p>
              <p style="line-height: 40px;" v-if="current=='jiedao'">请选择县区</p>
              <p style="line-height: 40px;" v-if="current==''">请选择街道</p>
              <ul class="add-ul" id="add-ul">
                <li v-for="(item,index) in arr1" :key = "index" class="add-data-li2 flex-num-one"
                @click="findAddList(current,item.name,item.id,5)"
                :class="index == idx ?'text-red':''"
                >
                  {{item.name}}
                </li>
              </ul>
            </div>

          </div>
      </div>
  </div>
</template>
<style lang="stylus" scoped>
.add-show{
  padding:10px;
  >div{
    height:30px;
    line-height: 30px;
    div:nth-child(2){
      margin-left: 20px;
    }
  }
  >div:nth-last-child(1){
    color:rgba(255,137,156,1);
  }
}
.btn-queren{
  background:rgba(255,137,156,1);
  margin:50px 25px 0;
  font-size:16px;
  font-family:'SourceHanSansCN-Medium';
  font-weight:500;
  line-height:42px;
  height: 4px;
  background:rgba(255,137,156,1);
}
</style>

<style lang="stylus" scoped>
  .text-red{
    color:rgba(255,137,156,1);
  }
  .add{
    position: fixed;
    left: 0;right:0;top: 0;bottom: 0;
    background: rgba(0,0,0,0.3);
    /* height:100%; */
  }
  .add-container{
      position: fixed;
      left: 0;
      bottom: 0;
      right: 0;
      background: #fff;
      padding:0 10px;
      animation:change-top .5s;
      animation-fill-mode:forwards;
    }

      @keyframes change-top{
        0%{top: 700px;}
        100%{top: 158px;}
      }

  .add-container2{
      animation:change-top2 .5s;
      animation-fill-mode:forwards;


  }   
  @keyframes change-top2{
    0%{top: 158px;}
    100%{top: 700px;}
  }


  .dot-1{
    width: 8px;height: 8px;
    border-radius: 50%;
    border:1px solid rgba(255,137,156,1);
  }
  .dot-2{
    width: 8px;height: 8px;
    border-radius: 50%;
    border:1px solid rgba(255,137,156,1);
    background: rgba(255,137,156,1);
  }
  .select-text{
    font-size:16px;
    font-family:'SourceHanSansCN-Medium';
    font-weight:600;
    color:rgba(25,25,25,1);
    line-height:37px;
  }
  /* 热门 */
  .hot-city-box{
    padding:30px 5px 15px;
  }
  .hot-city{
    font-size:12px;
    font-family:'SourceHanSansCN-Medium';
    font-weight:500;
    color:rgba(160,154,155,1);
    line-height:18px;
    margin-bottom: 15px;
  }
  .add-hot-li2{
    font-size:14px;
    font-family:'SourceHanSansCN-Regular';
    font-weight:400;
    color:rgba(25,25,25,1);
    line-height:18px;
    box-sizing: border-box;
    background-color: white;
    flex: 0 0 25%;
    text-align: center;
    align-items: center;
    height: 40px;
    line-height: 40px;
  }

  /* 地址列表 */
  .city-box{
  /* height: 100%; */
}
.city-box>p{
  font-size:12px;
  font-family:'SourceHanSansCN-Medium';
  font-weight:500;
  color:rgba(160,154,155,1);
  line-height:18px;
  margin-bottom: 10px;
}
  .add-ul{
    overflow: auto;
    /* top: 50px; */
    /* height:60%; */
    /* height: 50%; */
    /* min-height: 50%;
    max-height: 70%; */
  }


.add-data-li2{
  font-size:14px;
  font-family:'SourceHanSansCN-Regular';
  font-weight:400;
  color:rgba(25,25,25,1);
  line-height:40px;
  height:40px;
  padding-left: 30px;
}

</style>

<script>
  import axios from "axios";
  import api from "@/fetch/api";
  import { Indicator, Progress, Button, Toast, Field } from "mint-ui";
  import { mapState, mapGetters, mapMutations } from "vuex";
  export default {
    name: "orderarea-index",
    components: {
      Indicator,
      Button,
      Toast,
      Field,
    },
    data() {
      return {
        isshowaddlist:true,
        iscloss:false,
        add:{
          'sheng':'请选择省份',
          'shengcode':0,
          'shi':'请选择城市',
          'shicode':0,
          'qu':'请选择县区',
          'qucode':0,
          'jiedao':'请选择街道',
          '':0,
          'detail':'',
        },
        current:'sheng',
        isShowAdd2:false,


        // 地址选择的参数
        sheng: "",
        shengcode: "",
        shi: "",
        shicode: "",
        qu: "",
        qucode: "",
        key: "",
        arr1: [],
        list: [],
        now: "sheng",
        i: 0,
        page: 1,
        ts: false,
        limit: 10,
        show: false,
        nodata: false,
        dploading: false,
        // 滚动分页参数
        cityloading: false,
        pullUpLoad: true,
        isPullup: true,
        isHasLoadMore: true, // 是否价值底部loading
        nextPage: null, // 是否存在下一页
        poge_total: 2,
        // 是否展示公司库存
        isShowtop:true,
        hotCity:[
          {'name':'北京','id':'9052'},
          {'name':'上海','id':'1'},
          {'name':'广州','id':'33821'},
          {'name':'深圳','id':'34132'},
          {'name':'杭州','id':'50204'},
          {'name':'南京','id':'40151'},
          {'name':'苏州','id':'40659'},
          {'name':'天津','id':'22357'},
          {'name':'武汉','id':'55021'},
          {'name':'长沙','id':'58787'},
          {'name':'重庆','id':'67752'},
          {'name':'成都','id':'17492'},
        ],
        cityList:[],



        // 是否展示地址选框
        isShowAdd: false,

        // 用户信息
        wxUserInfo: this.$store.state.userInfo,

        // 顶部导航数据
        topTabbar:['公司库存','个人库存'],

        // 是否展示导航栏，默认不展示
        isshowtabbar: false,

        // 顶部tabbar，
        currentTabbar: this.$store.state.currentTabbar,

        // 库存选择
        currentStockTabbar: this.$store.state.currentStockTabbar,

        // 数据列表
        goodslist: [],

        // 是否显示遮罩层
        isShowMask: false,
        idx:100,
      };
    },

    created() {
      // this.find('sheng')
      
      this.findAddList(this.current)
      console.log(66666)
      console.log(this.wxUserInfo)

      if(this.wxUserInfo == ''){
        this.wxUserInfo = this.getlocalStorage('wxUserInfo');
      }
      console.log(this.wxUserInfo)
      console.log(77777)

      document.title = "下单区";

      if(this.wxUserInfo.level == '联合创始人' ||this.wxUserInfo.level == '系统管理员'){
        this.isShowtop = true
      }else{
        this.isShowtop = false
        this.currentStockTabbar = '个人库存'
      }
      console.log('wxUserInfo',this.wxUserInfo)


    },
    mounted() {
      console.log(
        "当前用户的等级及遮罩层",
        this.wxUserInfo.level,
        this.isshowtabbar
      );


      console.log('this.currentStockTabbar',this.currentStockTabbar)

      // 判断权限，判断是什么权限，打开遮罩层或者顶部tabbar按钮
      this.fnJudgmentauthority();





      // console.log(456,this.currentStockTabbar)
      // // 获取数据
      // this.fnGetData();
      if(this.currentStockTabbar == '公司库存'){
          this.fnGetData('lc');

        }else{
          this.fnGetData('one');
        }
    },
    methods: {
      closs(){
        this.iscloss = true
        setTimeout(() => {
          this.iscloss = false
          this.isShowAdd2 = false
          this.$router.go(-1)
        }, 300);
      },




      addDefine(){
        console.log(this.add)

        // // 未填省市信息的拦截
        // if (
        //   this.sheng == "" ||
        //   this.shi == "" ||
        //   this.qu == "" ||
        //   this.key == ""
        // ) {
        //   Toast("请选择需要查询的城市信息");
        //   return;
        // }

        // // 数据加载完毕的提示
        // if (this.ts == true || this.page >= this.page_total) {
        //   Toast("暂无更多信息");
        //   this.dploading = false;
        //   return;
        // }

        // 关闭地址选框
        // this.isShowAdd = false;

        // 设置参数
        var params4 = {
          userid: this.wxUserInfo.id,
          province: this.add.sheng,
          city: this.add.shi,
          quxian: this.add.qu,
          address: this.add.jiedao +this.add.detail
        };

        api.regiMerchant(params4).catch(res => {
          console.log("888", res);
          if (res.data.code == 1) {
            this.fnGetData('one');
            Toast(res.data.msg);
            // 重新请求权限，暂不需要，因为需要审核
            // this.fnJudgmentauthority()
          } else if (res.data.code == 0) {
            Toast(res.data.msg);
          }
          this.isShowAdd2 = false
        });




      },










      /**
       * @desc    过滤价格，根据等级显示不同的价格
       * @author  ye
       * @param   {arr},arr，需要过滤的数组
       */
      fn_handle_price(arr,price) {
        console.log(1)
        console.log(arr,price)
        var value;
        if(!arr ){
          return
        }
        arr.forEach(item => {
          if (item.level == this.wxUserInfo.level) {
            value = item.price;
          }
        });
        if(!value){
          value = Number(price).toFixed(2)
        }
        return value;
      },

      /**
       * @desc    输入关键字时，清空列表，清空提示样式
       * @author  ye
       * @param   none
       */
      qingkong() {
        this.list = [];
        this.dploading = false;
        this.ts = false;
        this.page = 1;
        this.nodata = false;
      },

      // 新，查找城市
      findAddList(str,parentName,parentID,num,old){
        this.arr1 = []
        setTimeout(() => {
          console.log(888,document.querySelector('.add-ul'))
          if(document.querySelector('.add-ul')){
            document.querySelector('.add-ul').scrollTop = 0
          }
        },30)
        // document.getElementsByClassName('add-ul')[0].scrollTop = 0
        // document.body.scrollTop = 0
        // console.log(888,document.querySelector('.add-ul'))
        // document.querySelector('.add-ul').scrollTo = 0
        // document.querySelector('.add-ul').scrollTop = 0
        // window.scrollX = 0
        // console.log(789,document.querySelector('.add-ul').onclick = scrollBy(0,0))

        this.idx = 100
                // 打开遮罩层
        Indicator.open({
          text: "加载中...",
          spinnerType: "fading-circle"
        });

        console.log('地址传入的参数',str,parentName,parentID,num,old)

        if(num == 1){
          console.log(789,this.add.sheng,this.add.shengcode)
          this.isshowaddlist= true
          this.fnchange('sheng', this.add.sheng)
          // this.add = {
          //   'sheng':'请选择省份',
          //   'shengcode':0,
          //   'shi':'请选择城市',
          //   'shicode':0,
          //   'qu':'请选择县区',
          //   'qucode':0,
          //   'jiedao':'请选择街道',
          //   '':0,
          //   'detail':'',
          // }
          parentID = undefined

        }else if(num == 2){
          this.fnchange('shi', this.add.shi)
          this.isshowaddlist= true

          // this.add.shi = '请选择城市'
          // this.add.qu = '请选择县区'
          // this.add.jiedao = '请选择街道'




        }else if(num == 3){
          this.fnchange('qu', this.add.qu)
          this.isshowaddlist= true

          // this.add.qu = '请选择县区'
          // this.add.jiedao = '请选择街道'

        }else if(num == 4){
          this.fnchange('jiedao', this.add.jiedao)
          this.isshowaddlist= true

          // this.add.jiedao = '请选择街道'

        }else if(num == 5){

          if(str == 'sheng'){
            this.add.shi = '请选择城市'
            this.add.qu = '请选择县区'
            this.add.jiedao = '请选择街道'
          }else if(str == 'shi'){
            this.add.shi = '请选择城市'
            this.add.qu = '请选择县区'
            this.add.jiedao = '请选择街道'
          }else if(str == 'qu'){
            this.add.qu = '请选择县区'
            this.add.jiedao = '请选择街道'
          }else if(str == 'jiedao'){
            this.add.jiedao = '请选择街道'
          }else{
            this.isshowaddlist= false

          }


        }

        if(str == 'shi'&& String(parentName).slice(-1)== '市' || str == 'shi'&& String(parentName).length== 2 ){
          console.log(88888888888)
          this.add.sheng = parentName
          this.add.shengcode = parentID
          str = 'qu'
          // return
        }









        // 1，当前触发位置
        // 2，上级名称
        // 3，上级code
        if(str == 'sheng'){
            console.log(123)
            this.current = "shi"
            var id = parentID
            var params2 = {
              parent_id: id
            };
            api.fouraddress(params2).catch(res => {

              this.arr1 = res.data;
              console.log('地址返回的数组1',this.arr1)
              Indicator.close();

            });

        }else if(str == 'shi'){
          console.log(456)
          this.add.sheng = parentName
          this.add.shengcode = parentID

          this.current = "qu"
          var params2 = {
            parent_id: this.add.shengcode
          };
          api.fouraddress(params2).catch(res => {

            this.arr1 = res.data;
            console.log('地址返回的数组2',this.arr1)
            Indicator.close();

          });
        }else if(str == 'qu'){
          console.log(789)
          this.add.shi = parentName
          this.add.shicode = parentID

          this.current = "jiedao"
          var params2 = {
            parent_id: this.add.shicode
          };
          api.fouraddress(params2).catch(res => {

            this.arr1 = res.data;
            console.log('地址返回的数组3',this.arr1)
            Indicator.close();

          });
        }
        else if(str == 'jiedao'){
          console.log('000')
          this.add.qu = parentName
          this.add.qucode = parentID
          this.current = ""
          var params2 = {
            parent_id: this.add.qucode
          };
          api.fouraddress(params2).catch(res => {
            Indicator.close();

            this.arr1 = res.data;
            console.log('地址返回的数组4',this.arr1)

          });

        }else{
          Indicator.close();

          this.add.jiedao = parentName
          // this.add.jiedaocode = parentID
        }

        setTimeout(() => {
          Indicator.close();          
        }, 3000);



        

      },
      fnchange(code,name){

        var id 
        if(code == 'sheng'){
          id = undefined

        }else if(code == 'shi'){
          id = this.add.shengcode

        }else if(code == 'qu'){
          id = this.add.shicode

        }else if(code == 'jiedao'){
          id = this.add.qucode

        }else{
          return
        }



        var params2 = {
          parent_id : id
        };
        api.fouraddress(params2).catch(res => {
          console.log('检索',res.data)
          res.data.forEach((item,index) => {
            if(item.name == name){
              this.idx = index
            }
          });
          console.log('idx',this.idx)
          setTimeout(() => {
            if(document.querySelector('.add-ul')){
              document.querySelector('.add-ul').scrollTop = 40 * this.idx
            }
          }, 50);
          Indicator.close();


        });



      },




      //  查找城市
      // find(a, b, c) {
      //   if (b == "") {
      //     a = "sheng";
      //   }
      //   this.page_total = 2;
      //   this.i = 0;
      //   this.list = [];
      //   this.show = true;
      //   this.page = 1;
      //   this.dploading = false;
      //   this.cityloading = true;
      //   // 查找省
      //   if (a == "sheng") {
      //     this.sheng = "";
      //     this.shi = "";
      //     this.qu = "";
      //     this.key = ""; 
      //     this.add.sheng = "请选择省份";
      //     this.add.shi = "请选择城市";
      //     this.add.qu = "请选择县区";
      //     this.add.detail = "";
      //     this.arr1 = [];
      //     var params = {};
      //     api.fouraddress(params).catch(error => {
      //       console.log(error);
      //       this.arr1 = error.data;
      //       this.cityloading = false;
      //       this.now = "shi";
      //     });
      //     // 查找市
      //   } else if (a == "shi") {
      //     console.log(a, b, c);
      //     console.log("市123");
      //     if (c.toString().slice(-1) == "市") {
      //       console.log("特殊");
      //       this.sheng = c;
      //       this.shengcode = b;
      //       console.log(99999999999);
      //       this.shi = c;
      //       this.shicode = b;
      //       // this.now = 'qu'
      //       // this.show = true
      //       this.cityloading = false;
      //       // // 清空原数据
      //       this.qu = "";
      //       this.key = "";
      //       this.arr1 = [];
      //       var params2 = {
      //         parent_id: b
      //       };
      //       api.fouraddress(params2).catch(error => {
      //         this.show = true;
      //         this.arr1 = error.data;
      //         this.cityloading = false;
      //         this.now = "detail";
      //         this.i = 3;
      //       });

      //       return;
      //     } else if (c == 1) {
      //       console.log(77777777);
      //       console.log(this.sheng.toString().slice(-1) == "市");
      //       if (this.sheng.toString().slice(-1) == "市") {
      //         this.find("sheng");
      //         console.log(77777777);
      //         return;
      //       }
      //     }
      //     // 写入数据
      //     if (this.sheng == "") {
      //       this.sheng = c;
      //       this.add.sheng = c;
      //       this.shengcode = b;
      //       this.add.shengcode = b;
      //     }
      //     // 清空原数据
      //     this.shi = "";
      //     this.qu = "";
      //     this.key = "";
      //     this.arr1 = [];
      //     var params2 = {
      //       parent_id: b
      //     };
      //     api.fouraddress(params2).catch(error => {
      //       this.show = true;
      //       this.arr1 = error.data;
      //       this.cityloading = false;
      //       this.now = "qu";
      //     });
      //     // 查找区
      //   } else if (a == "qu") {
      //     // 写入数据，清空原有
      //     if (this.shi == "") {
      //       this.shi = c;
      //       this.add.shi = c;
      //       this.shicode = b;
      //       this.add.shicode = b;
      //     }
      //     this.qu = "";
      //     this.key = "";
      //     var params3 = {
      //       parent_id: b
      //     };
      //     api.fouraddress(params3).catch(error => {
      //       this.show = true;
      //       this.arr1 = error.data;
      //       this.cityloading = false;
      //       this.now = "detail";
      //       // 显示提示
      //       this.i = 3;
      //     });
      //     // 查找关键字
      //   } else if (a == "detail") {
      //     this.qu = c;
      //     this.add.qu = c;
      //     this.cityloading = false;
      //   }
      //   // 查找时，清空提示
      //   this.ts = false;
      // },





      // 发送请求
      chazhao() {
        // 未填省市信息的拦截
        if (
          this.sheng == "" ||
          this.shi == "" ||
          this.qu == "" ||
          this.key == ""
        ) {
          Toast("请选择需要查询的城市信息");
          return;
        }

        // 数据加载完毕的提示
        if (this.ts == true || this.page >= this.page_total) {
          Toast("暂无更多信息");
          this.dploading = false;
          return;
        }

        // 关闭地址选框
        this.isShowAdd = false;

        // 设置参数
        var params4 = {
          userid: this.wxUserInfo.id,
          province: this.sheng,
          city: this.shi,
          quxian: this.qu,
          address: this.key
        };

        // 拼接页面信息
        params4 = Object.assign(params4, { page: this.page });
        console.log(params4);
        // 控制店铺下端动画
        this.dploading = true;
        // 查找不到的提示
        this.nodata = false;
        api.regiMerchant(params4).catch(res => {
          console.log("888", res);
          if (res.data.code == 1) {
            this.fnGetData('one');
            Toast(res.data.msg);
            // 重新请求权限，暂不需要，因为需要审核
            // this.fnJudgmentauthority()
          } else if (res.data.code == 0) {
            Toast(res.data.msg);
          }
        });
      },

      /**
       * @desc    判断权限，判断是什么权限，打开遮罩层或者顶部tabbar按钮
       * @author  ye
       * @param   none
       */
      fnJudgmentauthority() {
        const params5 = {
          userid: this.wxUserInfo.id
        };
        api.getMerchantInfo(params5).catch(res => {

          console.log("判断权限000", res);
          // 有msg，则显示其他入口【后端bug】
          if (res.data.msg) {
            if (res.data.code == 1) {
              // 用户级别不够，非联合创始人，
              // 显示面膜，隐藏导航栏，隐藏遮罩层
              this.isShowMask = false;
              this.isshowtabbar = false;
            } else if (res.data.code == 2) {
              // 该联合创始人还没有注册，
              // 显示所有，打开遮罩层
              this.isShowMask = true;
              this.isshowtabbar = true;
            } else if (res.data.code == 0) {
              // 参数有误
              console.log("信息有误");
            }
          } else {
            // 没有msg，则为联合创始人。显示联合创始人入口
            // 最终代码
            this.isShowMask = false;
            this.isshowtabbar = true;

            // 测试代码

            // 是否显示遮罩层
            // this.isShowMask = true
            // this.isShowMask = false

            // 打开tabbar按钮
            // this.isshowtabbar = true
            // this.isshowtabbar = false
          }
        });
      },

      /**
       * @desc    权限是否验证的按钮，关闭遮罩层的按钮
       * @author  ye
       * @param   {type} ,type，判断是哪一个按钮
       */

      fnToAuthenticate(type) {
        console.log(type);
        if (type == "yes") {
          // this.isShowAdd = true;
          this.isShowMask = false;
          this.isShowAdd2 = true
        } else {
          // 关闭遮罩层
          this.isShowMask = false;
          this.$router.go(-1)
        }
      },

      /**
       * @desc    改变顶部tabbar
       * @author  ye
       * @param   {type}，type，按钮类型
       */
      // fnChangetabber(type) {
      //   console.log(type)
      //   this.currentTabbar = type;
      //   // 重新请求数据
      //   this.fnGetData();
      // },

      /**
       * @desc    改变联创库存tabbar
       * @author  ye
       * @param   {type}，type，按钮类型
       */
      fnChangeStockTabbar(type) {
        this.goodslist = []
        this.currentStockTabbar = type;
        if(type == '公司库存'){
          this.fnGetData('lc');

        }else{
          this.fnGetData('one');
        }
        console.log(123,type)
        // 重新请求数据
      },

      /**
       * @desc    获取数据
       * @author  ye
       * @param   none
       */
      fnGetData(type) {

        // 打开遮罩层
        Indicator.open({
          text: "加载中...",
          spinnerType: "fading-circle"
        });

        const params = {
          userid: this.wxUserInfo.id,
          type: type
        };
        api.getGoodsInfo(params).catch(res => {
          console.log("下单首页渲染的数据", res.data);
          // 关闭遮罩层
          Indicator.close();
          if(res.data.msg){
            return;
          }

          // 没有数据
          if (res.data.length == 0) {
            this.goodslist = [];
            return;
          }

          // 联创的个人区的兼容处理，易错
          if (this.currentStockTabbar == "个人库存") {
            this.goodslist = [];
            if(res.data == []){
              return;
            }
        console.log(2)
            res.data.forEach(item => {
              // 修改数据的值
              item.goods.inventory = item.m_inventory;
              this.goodslist.push(item.goods);
            });
          } else {
            this.goodslist = [...this.goodslist,...res.data]
          }
          
        });
      },

      /**
       * @desc    查看商品详情，跳转路由，带上商品的参数
       * @author  ye
       * @param   {id,index}，id，商品的id。index，商品在当前数组的索引值
       */

      fnToDetail(id, index , item) {
        if(item.inventory == 0 ){
          Toast("库存不足，请联系客服")
          return
        }
        this.$router.push({
          path: "/goodsdetail?goods_id=" + id + "&goods_index=" + index
        });
      }
    },

    // 监听两个tabbar的数据
    watch: {
      currentStockTabbar: {
        immediate: true,
        deep: true,
        handler(new_val, old_val) {
          this.$store.commit("changeCurrentStockTabbar", new_val);
        }
      },
      currentTabbar: {
        immediate: true,
        deep: true,
        handler(new_val, old_val) {
          this.$store.commit("changeCurrentTabbar", new_val);
        }
      }
    }
  };
</script>
